<template>
  <div>
    <el-form :inline="true">
      <!--网点类型查询-->
      <el-form-item v-if="searchInStock.roleType === 1 || preOfficeType === '0'">
        <el-select v-model="searchInStock.pointType" placeholder="请选择网点类型" @change="onPointChange()">
          <el-option
            v-for="item1 in pointTypeOptions"
            :key="item1.id"
            :label="item1.name"
            :value="item1.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="searchInStock.pointType === 0 && preOfficeType !== '1'">
        <el-select v-model="searchInStock.pointId" placeholder="请选择办事处" clearable>
          <el-option
            v-for="item1 in pointOptions"
            :key="item1.id"
            :label="item1.name"
            :value="item1.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="searchInStock.pointType === 1 && preOutsourceType !== '0'">
        <el-select v-model="searchInStock.pointId" placeholder="请选择外包商" clearable>
          <el-option
            v-for="item1 in outsourceOptions"
            :key="item1.id"
            :label="item1.company"
            :value="item1.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="searchInStock.modelId" clearable placeholder="请选择型号">
          <el-option
            v-for="item in allModel"
            :key="item.id"
            :label="item.code"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model="searchInStock.ystsn" clearable placeholder="请输入YSTSN"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchData">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="exportLoading" @click="excelExport()">数据导出</el-button>
      </el-form-item>
    </el-form>
    <custom-table
      :data="InstockList"
      :columns="columns"
      :tableLoadingFlag="tableLoadingFlag"
      :pagination="pagination">
    </custom-table>
  </div>
</template>
<script>
  import CustomTable from '@/components/table/CustomTable'
  import {apiGetBadInstockList, apiInstockExport} from '@/api/stock/index'
  import {apiGetModelList, apiGetAllPointOffice} from '@/api/dictionary'
  import {parseTime} from '@/utils'
  import {getOfficeType, getRoleType, getOutsourceType, getProvinceCode, getCityCode} from '@/utils/token'
  import {apiGetOutsourcerList} from '@/api/basic/info/outsourcer'
  import {apiGetOfficeList} from '@/api/basic/info/inside/office'
  import {downloadExcel} from "../../../utils";

  export default {
    components: {
      CustomTable
    },
    created () {
      this.preOutsourceType = getOutsourceType()
      this.preOfficeType = getOfficeType()
      let listQuery = {
        pageNumber: this.pagination.currentPage,
        pageSize: this.pagination.pageSize
      }
      if (getRoleType() === '2') {
        this.searchInStock.roleType = 2
        this.searchInStock.pointType = 0
        this.searchInStock.provinceCode = getProvinceCode()
        if (getOfficeType() === '1') {
          this.searchInStock.cityCode = getCityCode()
        }
      }
      if (getRoleType() === '3') {
        this.searchInStock.roleType = 3
        this.searchInStock.pointType = 1
        this.searchInStock.provinceCode = getProvinceCode()
        if (getOutsourceType() === '0') {
          this.searchInStock.cityCode = getCityCode()
        }
      }
      this.getInstockList(listQuery)
      this.getAllModel()
      this.getOffice()
      this.getOutsource()
    },
    data () {
      return {
        tableLoadingFlag: false,
        columns: [
          {label: '型号', name: 'model', align: 'center'},
          {label: 'YSTSN', name: 'ystsn', align: 'center'},
          {label: '入库类型', name: 'typeName', align: 'center'},
          {label: '入库时间', name: 'instockTime', align: 'center', formatter: this.formatTime},
          {label: '入库操作人员', name: 'operator', align: 'center'},
          {label: '入库数量', name: 'num', align: 'center', renderHeader: this.renderHeader}
        ],
        InstockList: [],
        allModel: [],
        // 办事处
        pointOptions: [],
        // 外包商
        outsourceOptions: [],
        pointTypeOptions: [{
          id: 0,
          name: '办事处'
        }, {
          id: 1,
          name: '外包商'
        }],
        searchInStock: {
          pointType: '',
          modelId: '',
          ystsn: '',
          pointId: '',
          cityCode: '',
          provinceCode: '',
          roleType: 1
        },
        listQuery: {
          type: undefined,
          pointType: undefined,
          modelId: undefined,
          ystsn: undefined,
          pointId: undefined,
          cityCode: undefined,
          provinceCode: undefined
        },
        pagination: this.getData(this.getInstockList),
        exportLoading: false
      }
    },
    methods: {
      getInstockList (listQuery) {
        this.tableLoadingFlag = true
        if (listQuery.pointType === undefined) {
          listQuery.pointType = this.searchInStock.pointType
        }
        if (listQuery.modelId === undefined) {
          listQuery.modelId = this.searchInStock.modelId
        }
        if (!listQuery.ystsn) {
          listQuery.ystsn = this.searchInStock.ystsn
        }
        if (!listQuery.pointId) {
          listQuery.pointId = this.searchInStock.pointId
        }
        if (!listQuery.provinceCode) {
          listQuery.provinceCode = this.searchInStock.provinceCode
        }
        if (!listQuery.cityCode) {
          listQuery.cityCode = this.searchInStock.cityCode
        }
        apiGetBadInstockList(listQuery).then(response => {
          this.InstockList = response.data
          this.pagination.totalRecords = response.totalRecords
          this.tableLoadingFlag = false
        }).catch(() => {
          this.tableLoadingFlag = false
        })
      },
      getAllModel () {
        apiGetModelList().then(response => {
          this.allModel = response.data
        })
      },
      searchData () {
        this.listQuery.pointType = this.searchInStock.pointType
        this.listQuery.modelId = this.searchInStock.modelId
        this.listQuery.ystsn = this.searchInStock.ystsn
        this.listQuery.pointId = this.searchInStock.pointId
        this.listQuery.provinceCode = this.searchInStock.provinceCode
        this.listQuery.cityCode = this.searchInStock.cityCode
        this.pagination.currentPage = 1
        this.pagination.pageSize = 10
        this.getInstockList(this.listQuery)
      },
      formatTime (row, column, cellValue) {
        return parseTime(cellValue)
      },
      onBtnCancel () {
        this.detailTableLoadingFlag = false
        this.tableLoadingFlag = false
        this.detailDialogVisible = false
      },
      onPointChange () {
        if (this.searchInStock.pointType === 0) {
          let listQuery = {
            province: this.searchInStock.provinceCode,
            city: this.searchInStock.cityCode
          }
          this.pointOptions = []
          this.getOfficeByCity(listQuery)
        } else {
          let listQuery = {
            provinceCode: this.searchInStock.provinceCode,
            cityCode: this.searchInStock.cityCode
          }
          this.outsourceOptions = []
          this.getOutsourceByCity(listQuery)
        }
      },
      // 获取网点一览
      getOffice () {
        let listQuery = {
          provinceCode: this.searchInStock.provinceCode,
          pageNumber: 1,
          pageSize: 100
        }
        apiGetOfficeList(listQuery).then(response => {
          this.pointOptions = response.data
        })
      },
      // 为数量列添加说明
      renderHeader (h, {column, $index}) {
        return [
          column.label,
          h(
            'el-tooltip',
            {
              props: {
                content: '该数量为批次总数量',
                placement: 'top'
              }
            },
            [
              h('span', {
                class: {'el-icon-question': true}
              })
            ]
          )
        ]
      },
      // 获取外包商一览
      getOutsource () {
        let listQuery = {
          provinceCode: this.searchInStock.provinceCode,
          pageNumber: 1,
          pageSize: 100
        }
        apiGetOutsourcerList(listQuery).then(response => {
          this.outsourceOptions = response.data
        })
      },
      // 按地区条件获取网点
      getOfficeByCity (listQuery) {
        this.searchInStock.pointId = ''
        apiGetAllPointOffice(listQuery).then(response => {
          this.pointOptions = response.data
        })
      },
      // 按地区获取外包商
      getOutsourceByCity (listQuery) {
        this.searchInStock.pointId = ''
        listQuery.pageNumber = 1
        listQuery.pageSize = 100
        apiGetOutsourcerList(listQuery).then(response => {
          this.outsourceOptions = response.data
        })
      },
      // 数据导出
      excelExport () {
        let listQuery = {
          // 判断是哪个库的操作（1： 良品库；2：不良品；3：报废品）
          stockType: 2,
          pointType: this.searchInStock.pointType,
          modelId: this.searchInStock.modelId,
          ystsn: this.searchInStock.ystsn,
          pointId: this.searchInStock.pointId,
          provinceCode: this.searchInStock.provinceCode,
          cityCode: this.searchInStock.cityCode
        }
        this.exportLoading = true
        apiInstockExport(listQuery).then(response => {
          downloadExcel(response.data, '自有售后不良品入库信息导出表')
          this.exportLoading = false
        }).catch(() => {
          this.exportLoading = false
        })
      },
      formatJson (filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      }
    }
  }
</script>
